/* services-page-animation.css */

/* Define the base styles for the text container */
.highlight-text {
    position: relative; /* Essential for positioning the pseudo-element */
    color: white; /* Ensure the text itself remains white */
    z-index: 1; /* Keep the text above the pseudo-element */
    
    /* This is the key property for blending */
    mix-blend-mode: overlay;
}

/* The pseudo-element for the animated background */
.highlight-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place the background layer behind the text */
    
    /* Radial gradient with multiple colors (without transparency) */
    background: radial-gradient(circle at center,
        #f35912 0%,   /* A warm orange */
        #6c24e8 25%,   /* The original purple */
        #00ffee 75%,   /* A cool blue */
        #2ecc71 100%   /* A leafy green */
    );

    background-size: 600% auto;

    border-radius: 5px;
    
    /* The animation itself */
    animation: gradient-animation 4.5s ease;
}

@keyframes gradient-animation {
    /* The animation will move the background-position to create the sweeping effect */
    0% {
        background-position: 100% 0;
    }
    15% {
        background-position: 100% 0;
    }
    45% {
        background-position: 50% 0;
    }
    65% {
        background-position: 50% 0;
    }
    100% {
        background-position: 0% 0;
    }
}